import { defineComponent, ref, } from "vue"
import { NCard, NButton, NSpace,NIcon, } from "naive-ui"
import Maincontainer from "@/components/maincontainer/index"
import Flexform, { flexformitem } from "@/components/flexform/index"
import Flextalbe from "@/components/flextable/index"
import Mypage from "@/components/mypage/index"
import useColums from "@/hooks/colums"
import useHttpMessage from "@/hooks/oftenattr"
import useTableIndex from "@/hooks/tableindex"
import {ViewFilled,Edit,Delete,ResetAlt,} from "@vicons/carbon"
import {SearchOutlined,PlusOutlined,} from "@vicons/antd"
import EditModel from "./editModel"
export default defineComponent({
    name: "wikimanager",
    setup() {
        /**********************************************************************************
        * 复用公共的钩子函数区域
        ***********************************************************************************/
        const {
            formValue,
            loading,
            total,
            tableData,
            editRef,
            pageRef,
            formRef,
            handleSearch,
            handleResetForm,
            handleView,
            handleEdit,
            handleCreate,
            refreshDelete
        } = useTableIndex()
        const { http, message } = useHttpMessage()
        const {index, createdTime, changeTime, desc, name,} = useColums()
        /**********************************************************************************
       * 自定义函数和属性区域
       ***********************************************************************************/
        const formList = ref([
            {
                span: 6,
                label: "名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入名称",
            },
            { slot: (item: flexformitem) => <div class="w-full"></div>, span: 6, type: "slot" },
            { slot: (item: flexformitem) => <div class="w-full"></div>, span: 6, type: "slot" },
            {
                slot: (item: flexformitem) => <NSpace class="mt-3px">
                    <NButton size={"small"} onClick={handleSearch} type={"success"} v-slots={{
                        icon: () => <NIcon size={14}>
                            <SearchOutlined />
                        </NIcon>
                    }}>搜索</NButton>
                    <NButton size={"small"} onClick={handleResetForm} type={"error"} v-slots={{
                        icon: () => <NIcon size={14}>
                            <ResetAlt />
                        </NIcon>
                    }}>重置</NButton><NButton
                        size={"small"} onClick={handleCreate} type={"info"} v-slots={{
                            icon: () => <NIcon size={14}>
                                <PlusOutlined />
                            </NIcon>
                        }}>新建</NButton></NSpace>, span: 6, type: "slot"
            }
        ])
        const colnums = ref([
            index,
            name,
            desc,
            createdTime,
            changeTime,
        ])
        const getTableDataFunc = () => { }
        /**********************************************************************************
         * 渲染html区域
         ***********************************************************************************/
        return () => (<Maincontainer>
            <NCard content-style="padding: 0;" class="flex-shrink-0">
                <Flexform v-model={[formValue.value, "value"]} formList={formList.value} />
            </NCard>
            <NCard class="flex-1" content-style="padding: 0;">
                <Flextalbe tableData={tableData.value} tableColums={colnums.value} />
            </NCard>
            <NCard class="h-40px flex-shrink-0" content-style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: 0 }}>
                <Mypage ref={pageRef} total={total.value} onGet={getTableDataFunc} />
            </NCard>
            <EditModel ref={editRef} />   
        </Maincontainer>)
    },
})
